<template>
  <DialogItem :isShow="dialog" :imgUrl="imgUrl" @shutdown="closeDialog" />
  <div class="main">
    <MyMemberMessage :width="'1200px'"></MyMemberMessage>
    <div class="more">
      <div class="big">
        <div class="contact">
          <MyNav
            :width="'1000px'"
            :padding="'0px 50px 0px'"
            :title="'个人简介'"
          ></MyNav>
          <MySlef
            :id="'one'"
            :width="'1000px'"
            :padding="'30px 50px 30px'"
            :title="'个人简介'"
          ></MySlef>
        </div>

        <!-- <MyAboutCard :width="'720px'" :padding="'40px 50px'" :title="'相关形象'" @update=""></MyAboutCard> -->
        <div class="about contact" id="two">
          <TitleItem :title="'相关形象'"></TitleItem>
          <div class="pics">
            <div class="pic" v-for="item in aboutList">
              <div class="img">
                <img :src="item.url" alt="" />
                <div class="bigscale" @click="openDialog(item)"></div>
              </div>
              <div class="text">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <MyStrength
          :width="'1000px'"
          :padding="'40px 50px'"
          :title="'个人优势'"
          :id="'three'"
          :required="true"
        ></MyStrength>
        <MyExpress
          :width="' 1000px'"
          :padding="'40px 50px'"
          :title="'项目经验'"
          :id="'four'"
          :required="true"
        ></MyExpress>
        <div class="expression"></div>
      </div>
      <MyContact :width="'350px'" :list="phoneList"></MyContact>
    </div>
  </div>
</template>

<script setup scoped>
//引入图标
import phone from "@/assets/images/phone.png";
import email from "@/assets/images/email.png";
import position from "@/assets/images/position.png";

const dialog = ref(false);
const imgUrl = ref("/_nuxt/assets/images/400x400.png");
// 相关形象
const aboutList = ref([
  {
    name: "相关形象1",
    url: "/_nuxt/assets/images/400x400.png",
  },
  {
    name: "wow",
    url: "/_nuxt/assets/images/01.png",
  },
  {
    name: "相关形象3",
    url: "/_nuxt/assets/images/phone.png",
  },
  {
    name: "相关形象4",
    url: "/_nuxt/assets/images/03.png",
  },
]);

//弹窗
const openDialog = (item) => {
  imgUrl.value = item.url;
  dialog.value = true;
};
const closeDialog = (val) => {
  dialog.value = val;
};
//联系列表
const phoneList = ref([
  {
    value: "138****2564",
    icon: phone,
  },
  {
    value: "******@163.com",
    icon: email,
  },
  {
    value: "深圳市罗**",
    icon: position,
  },
]);
//锚点链接平滑

</script>

<style lang="scss">
body {
  background-color: #f4f5f7;
}
div {
  border-radius: 3px;
}
.main {
  width: 1480px;
  margin: 0 auto;
  padding: 60px 50px 30px;
}

.more {
  display: flex;
  justify-content: space-between;
  align-items: start;
  .contact {
    background-color: #fff;
    
    transition: all 0.5s ease-in-out;
  }
  .contact:hover {
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    //box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
    //transform: translateY(-3px);
  }
  .big {
    > div {
      margin-bottom: 20px;
    }

    .about {
      width: 1000px;
      padding: 40px 50px;
      background-color: #fff;
    }
    .pics {
      width: 100%;
      overflow-x: auto;
      white-space: nowrap; /* 防止子元素换行 */
      margin-top: 30px;
      .pic {
        display: inline-block;
        margin-left: 20px;
        .img {
          position: relative;
          width: 290px;
          height: 290px;
          background: linear-gradient(to top, #fff, #f2f4f8);

          border-radius: 5px;
          white-space: nowrap;
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            width: 160px;
            height: 226px;
            object-fit: cover;
          }
          .bigscale {
            position: absolute;
            right: 16px;
            bottom: 30px;
            width: 24px;
            height: 24px;
            background: url("@/assets/images/bigscale.png") no-repeat;
          }
        }

        .text {
          font-size: 16px;
          text-align: center;
          color: #222;
          margin-top: 20px;
        }
      }
      .pic:first-child {
        margin-left: 0;
      }
    }

    //去除滚动条
    .pics::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
